<template>
  <div class="hz-back" style="width: 100%;height: aoto;">
    <div
      class="flex-column justify-center align-items-center"
      style="margin: 0 auto;width: 70rem;"
    >
      <h2 class="maincolor text-44" style="line-height: 3em;margin-top: 5rem;">
        合作伙伴
      </h2>
      <div
        style="border-bottom:2px #f0f0f0 solid;width: 20rem;text-align: center;"
      ></div>
      <div
        style="border-bottom:4px #5faee3 solid;width: 5rem;text-align: center;margin-top: -3px;"
      ></div>
      <div style="margin-top: 1.5rem;text-align: left;width: 50rem;">
        {{ article }}
      </div>
      <!-- <embed src="../assets/wisdom/idealsvg.svg" style="display:block;width:330px;height:240px" /> -->
      <div
        style="margin: 3rem 0 5rem 0;width: 100%;"
        class="flex-row align-items-center  justify-between  product-content"
      >
        <div><img src="@/assets/wisdom/zstt.png" /></div>
        <div><img src="@/assets/wisdom/znlogo.png" /></div>
        <div><img src="@/assets/wisdom/hunu.png" /></div>
        <div><img src="@/assets/wisdom/hunu.png" /></div>
      </div>
    </div>
    <div class="tel-back">
      <div
        class="flex-column justify-center align-items-center"
        style="margin: 0 auto;width: 70rem;"
      >
        <h2
          class="maincolor text-44"
          style="line-height: 3em;margin-top: 5rem;"
        >
          联系我们
        </h2>
        <div
          style="border-bottom:2px #f0f0f0 solid;width: 20rem;text-align: center;"
        ></div>
        <div
          style="border-bottom:4px #5faee3 solid;width: 5rem;text-align: center;margin-top: -3px;"
        ></div>
        <div style="margin-top: 1.5rem;text-align: left;width: 50rem;">
          {{ article }}
        </div>
        <!-- <embed src="../assets/wisdom/idealsvg.svg" style="display:block;width:330px;height:240px" /> -->
        <div
          style="margin: 2rem 0 5rem;width: 62.5rem;height: auto;background: #FFFFFF;"
          class="tel-model"
        >
          <div
            class=" flex-row justify-center flex-wrap"
            style="margin: 3.75rem;"
          >
            <textarea
              class="textarea text-16"
              style="width: 27.5em;height: 12.5em;"
            ></textarea>
            <div
              class="flex-column align-items-center minmargn"
              style="min-width: 375px;"
            >
              <input
                class="textarea sinput text-18"
                placeholder="请在此处填写您的姓名或公司名称"
              />
              <input
                class="textarea sinput text-18"
                style="margin-top: 1rem;margin-bottom: 2.5rem;"
                placeholder="请在此处填写您的邮箱地址"
              />
              <div class="sinput btn">发送</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article:
        "这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。简介的文案"
    };
  }
};
</script>

<style scoped lang="less">
.tel-back {
  // background: url(../assets/wisdom/back5.png)!important;
  // background-size: 100% 100%!important;
  // background-repeat: no-repeat!important;
}

.hz-back {
  background: url(../../../assets/wisdom/hzhbback.png) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.product-content {
  & > div {
    flex: 1 1 auto;
    height: 6rem;
    background: #ffffff;

    padding: 0.5rem;
    margin-right: 1rem;
    text-align: center;

    &:nth-child(4) {
      margin-right: 0rem;
    }

    & > {
      img {
        width: 100%;
        height: 5rem;
      }
    }
  }
}

.tel-model {
  border-radius: 5px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

.textarea {
  border: 1px solid rgba(153, 153, 153, 0.5);
  border-radius: 5px;
  padding: 10px 10px;
  text-indent: 2em;
  box-sizing: border-box;

  resize: none; //禁止拖拉变化大小

  &:focus {
    border: 1px solid #3498db;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(52, 152, 219, 0.2);
    outline: none;
  }
}

.sinput {
  width: 25em;
  height: 3em;
  margin-left: 2.5em;
  text-indent: 0em;
}

.btn {
  text-align: center;
  line-height: 3em;

  background: linear-gradient(#4e8dec, #39baea);
  border-radius: 11.5em;
  color: white;
  cursor: pointer;

  &:hover {
    transition: box-shadow 0.3s;
    box-shadow: 0px 4px 15px 0px rgba(95, 174, 227, 0.6);
    // background: linear-gradient(#4e8dec88, #39baea88);
  }
}
@media screen and (max-width: 1300px) {
  .minmargn {
    margin-top: 1em;
  }
  .sinput {
    margin-left: 0rem;
    width: 17em;
    height: 2.4em;
  }
}
</style>
<style></style>
